<template>
    <div id="pmw_szmx">
        <!--选项卡插件-->
        <el-tabs id="p_szmx_box" type="border-card" v-model="whichTab">
            <el-tab-pane label="收入明细">
                <div class="p_table">
                    <el-table
                            :data="shouruData"
                            style="width: 100%"
                            :default-sort = "{prop: 'payType', order: 'ascending'}"
                            height="500"
                            :stripe=true
                            :border=true
                            :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                            :cell-style="{textAlign:'center'}"
                    >
                        <el-table-column
                                prop="payType"
                                label="交易类型"
                                sortable
                                min-width="33.3%">
                        </el-table-column>
                        <el-table-column
                                prop="createTime"
                                sortable
                                label="交易时间"
                                min-width="33.3%">
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                sortable
                                label="交易价格"
                                min-width="33.3%">
                        </el-table-column>
                    </el-table>
                </div>
                <!--交易金额总计-->
                <div class="p_total">交易金额总计：<span>{{sumMoney}}</span>元</div>
            </el-tab-pane>
            <el-tab-pane label="支出明细">
                <div class="p_table">
                    <el-table
                            :data="zhichuData"
                            style="width: 100%"
                            :default-sort = "{prop: 'type', order: 'ascending'}"
                            height="500"
                            :stripe=true
                            :border=true
                            :header-cell-style="{backgroundColor:'#409EFF',textAlign:'center',color:'white'}"
                            :cell-style="{textAlign:'center'}"
                    >
                        <el-table-column
                                prop="type"
                                label="交易类型"
                                sortable
                                min-width="25%">
                        </el-table-column>
                        <el-table-column
                                prop="time"
                                label="交易时间"
                                sortable
                                min-width="25%">
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                sortable
                                label="交易价格"
                                min-width="25%">
                        </el-table-column>
                        <el-table-column
                                prop="payReason"
                                label="备注"
                                min-width="25%">
                        </el-table-column>
                    </el-table>
                </div>
                <!--交易金额总计-->
                <div class="p_total">交易金额总计：<span>{{sumMoney}}</span>元</div>
            </el-tab-pane>
        </el-tabs>
        <!--搜索框部分-->
        <div class="p_search clear">
            <div class="block">
                <el-date-picker
                        v-model="searchDate"
                        :picker-options=pickerOptions
                        value-format="yyyy-MM"
                        type="month"
                        placeholder="选择年月">
                </el-date-picker>
            </div>
            <div><el-button type="primary" @click="searchDateData">搜索</el-button></div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "pmw_szmx",
        data() {
            return {
                whichTab:'0',
                shouruData:[],
                zhichuData:[],
                searchDate:'',
                total:0,
                /*设置今天之后的时间不可选*/
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
                    }
                },
            }
        },
        methods:{
            /*点击查询*/
            searchDateData(){
                //arr的第一个是年份，第二个是月份
                let arr=['',''];
                if(this.searchDate)arr=this.searchDate.split('-');
                if(this.whichTab==='0'){//收入
                    let data = {
                        "mouth": arr[1],
                        "pager": {
                            "currentPage": 1,
                            "pageSize": 100
                        },
                        "year": arr[0]
                    };
                    axios({
                        url: '/api/rms/operate/detail/queryIncome',
                        method: 'post',
                        params: data,
                        transformRequest: [function () {
                            return JSON.stringify(data)
                        }],
                        headers: {
                            'Content-Type': 'application/json;'
                        },
                    }).then(res => {
                        this.shouruData = [];
                        this.shouruData = res.data.info
                    })
                }
                else if(this.whichTab==='1'){//支出
                    let data = {
                        "mouth": arr[1],
                        "pager": {
                            "currentPage": 1,
                            "pageSize": 100
                        },
                        "year": arr[0]
                    };
                    axios({
                        url: '/api/rms/operate/detail/queryExpend',
                        method: 'post',
                        params: data,
                        transformRequest: [function () {
                            return JSON.stringify(data)
                        }],
                        headers: {
                            'Content-Type': 'application/json;'
                        },
                    }).then(res => {
                        this.zhichuData = [];
                        this.zhichuData = res.data.info
                    })
                }
                else return false;
            }
        },
        watch:{
            whichTab(){
                if(this.whichTab==='0'){//收入
                    let data = {
                        "mouth": '',
                        "pager": {
                            "currentPage": 1,
                            "pageSize": 100
                        },
                        "year": ''
                    };
                    axios({
                        url: '/api/rms/operate/detail/queryIncome',
                        method: 'post',
                        params: data,
                        transformRequest: [function () {
                            return JSON.stringify(data)
                        }],
                        headers: {
                            'Content-Type': 'application/json;'
                        },
                    }).then(res => {
                        this.shouruData = [];
                        this.shouruData = res.data.info
                    })
                }
                else if(this.whichTab==='1'){//支出
                    let data = {
                        "mouth": '',
                        "pager": {
                            "currentPage": 1,
                            "pageSize": 100
                        },
                        "year": ''
                    };
                    axios({
                        url: '/api/rms/operate/detail/queryExpend',
                        method: 'post',
                        params: data,
                        transformRequest: [function () {
                            return JSON.stringify(data)
                        }],
                        headers: {
                            'Content-Type': 'application/json;'
                        },
                    }).then(res => {
                        this.zhichuData = [];
                        this.zhichuData = res.data.info
                    })
                }
            }
        },
        created() {
            let data = {
                "mouth": "",
                "pager": {
                    "currentPage": 1,
                    "pageSize": 100
                },
                "year": ""
            };
            axios({
                url: '/api/rms/operate/detail/queryIncome',
                method: 'post',
                params: data,
                transformRequest: [function () {
                    return JSON.stringify(data)
                }],
                headers: {
                    'Content-Type': 'application/json;'
                },
            }).then(res => {
                this.shouruData = res.data.info
            })
        },
        computed:{
            /*合计*/
            sumMoney(){
                this.total=0;
                let arr=[];
                if(this.whichTab==='0')arr=this.shouruData;
                else if(this.whichTab==='1')arr=this.zhichuData;
                if(arr.length>0){
                    arr.map(item=>this.total+=item.price)
                }
                return this.total;
            }
        },
    }
</script>

<style scoped lang="less">
    .el-button--primary{
        height: 40px;
        padding: 0 20px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .clear:after{
        content: '';
        clear: both;
        display: block;
    }
    #pmw_szmx{
        position: relative;
        padding: 20px;
        /*选项卡*/
        #p_szmx_box{
            .p_table{
                padding:25px 50px;
            }
            .p_total{
                height: 40px;
                line-height: 40px;
                margin-bottom:10px ;
                padding: 0 50px;
                text-align: right;
                color: #797d85;
                span{
                    color: #67C23A;
                    font-weight:bold ;
                    cursor: default;
                }
            }
        }
        /*搜索框*/
        .p_search{
            position: absolute;
            top: 20px;
            right: 20px;
            padding-right: 5px;
            &>div{
                float: left;
                margin-left: 10px;
            }
            div:first-child{
                width: 130px;
            }
        }
    }
</style>
